<style lang="scss" scoped>
.mouts {
      width: 100%;
      height: 736px;
      background-color: #f7f7f7;
}

.top {
      background-color: white;

      div {
            height: 116px;
            text-align: center;
            margin-top: 20px;
            font-size: 24px;
            line-height: 70px;

            p:nth-child(1) {
                  font-size: 30px;
                  line-height: 80px;
            }

            p:nth-child(2) {
                  font-size: 15px;
                  line-height: 0px;
            }
      }
}

.send {
      width: 100%;
      height: 107px;
      background-color: white;

      div {
            width: 94%;
            margin-left: 10px;
            background-color: #f7f7f7;

            p {
                  margin-left: 10px;
                  line-height: 30px;
            }
      }
}

.threes {
      margin-top: 10px;
      height: 308px;

      background-color: white;

      div:nth-child(1) {

            span:nth-child(2) {
                  margin-left: 230px;
            }
      }
}

</style>



<template>
      <div>
            <div class="mouts">

                  <div class="top">
                        <div>
                              <p>0分钟</p>
                              <p>睡眠时长</p>
                        </div>
                  </div>

                  <div class="send">

                        <div>
                              <p>还没有您的睡眠记录</p>
                              <p>通过智能设备上传您的睡眠数据,看看健康顾问怎么说</p>
                        </div>

                  </div>

                  <div class="threes">
                        <div>
                              <span>近7日记录</span>
                              <span>查看更多记录></span>
                        </div>
                        <div ref="main" style="width: 390px;height:240px"></div>
                  </div>

            </div>
      </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import { flat } from 'vant/lib/utils';
import { ref, onMounted } from 'vue'

const main = ref<HTMLElement>()
onMounted(() => {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(main.value as HTMLElement);
      // 绘制图表
      myChart.setOption({
            xAxis: {
                  type: 'category',
                  data: []
            },
            yAxis: {
                  type: 'value',
            },
            series: [
                  {
                        data: [22, 8, 10, 22, 18, 14],
                        type: 'line'
                  }
            ]
      });
})

</script>